Wireframe :: tistory

아, 기다리고 기다리던 대망의 여섯 번째 시간입니다. 이 글은 2009년 9월 13일 일요일 새벽에 작성을 시작했습니다. 이미지 분량이 상당히 많기 때문에, 업로드 하는 것만해도 큰 일이 될 듯 합니다만, 일단 한 번 시작해 보도록 하겠습니다.

지난 글에서 살짝 공지해 드렸다시피, 저는 애지 중지 잘 사용중이던 노트북을 망가뜨리고야 말았습니다. 그게 벌써 3주전이군요. 어쨌거나 집에와서 간단한 오피스 문서 작업이나, 메일 확인은 꼭 해야했기에 꽤 오래된 사양의 컴퓨터를 하나 업어와서 리눅스를 설치해서 쓰고 있습니다. 그래서 이전 글들과는 조금 그림이 다를 수 있습니다. 게다가 지금 화면 해상도는 1024x768이기 때문에, 그림들이 다들 좀 짧아도 이해해 주시길... (저, 이 소스 새로 타이핑 했단 말예요 엉엉. 아 그런데 리눅스에 기본으로 들어가있는 편집기는 정말 좋군요! 아래 스샷들은 기본 텍스트 편집기임)

우리는 지난 시간까지, 간단한 블로그 페이지의 모양새를 살펴보았고 이를 편집기를 통해 코딩하는 것까지 진행해보았습니다. 그리고 간단히 레이아웃만 잡아서, 아래 위로만 나열되던 글들이 어떻게 자리를 잡아가는 지 그 과정을 지켜보았습니다. 그렇게 작성된 것이 아래의 코드라는 (너무 길어서 footer가 짤렸습니다;) 것이죠

좀 정성스럽게 코드부분만 잘라서 넣었으면 좋았을 것을... 하는 생각도 듭니다. 아무튼 이렇게 레이아웃만 잡아서 확인할 수 있던 HTML페이지의 모양새는 아래와 같았습니다. (오페라는 너무 무거워서 그냥 크롬으로 확인했습니다.)

이제, 레이아웃은 다 잡아 놓았으니 CSS를 통해 모양새를 조금 정리해보도록 하겠습니다.

먼저 헤더 부분입니다. 위쪽으로 여백을 좀 주고 모양을 정리하기 위해 아래와 같은 코드를 css 파일에 추가합니다.

위쪽으로 여백을 좀 준다음, 테두리를 굵게 그려서 박스가 덧 그려지는 효과를 연출합니다. 제목 아래 description은 역시 여백을 많이 주어 들여쓴 것처럼 보이게 합니다. 이 결과는 아래에서 확인하세요

이번에는 왼쪽 네비게이션 영역입니다. 왼쪽 간격을 띄우고, 리스트 아이템들의 불릿 표시를 없애겠습니다.

그런 다음 각각 아래 위로 공간을 두겠습니다. 위에서도 알 수 있듯이 ul li라고만 정의하면 ul의 밑에 있는 li가 모두 포함이 되기 때문에 1차 리스트와 2차 리스트가 같이 적용을 받습니다. 간격이 동일하게 커져버리니, 아래쪽에 다시 2차 리스트 (ul > li > ul > li)에 대해서는 위쪽 공백을 없애서 그룹들간의 간격만 남겨둡니다..

이 후에 각 그룹의 제목에 해당하는 녀석들은 위의 헤더와 마찬가지로 약간의 효과 추가.

이제, 문서는 이런 모양이 됩니다. (물론 여러분들은 제가 안 시켜도 하나 하나 추가하면서 모양들을 확인해 보고, 또 값이나 속성들을 바꿔보면서 계속 확인하고 있으실거라 믿어 의심치 않습니다.)

자, 이번에는 드디어 본문입니다. 왼쪽 여백을 살짝 띄우고, 각 문단의 상단에 여백을 주어, 한 편의 포스팅마다 여백으로 구분이 되도록 해보겠습니다. 그리고 한 페이지에 포스팅은 여러 개가 등장하기 때문에 이번에는 아이디(#)가 아닌 클래스(.)로 정의 하는 점도 눈여겨 볼 대목입니다.

그런데, 이렇게 해 두면 브라우저에서 확인해보면 첫 번째 포스팅도 여백이 붕 떠버립니다. 좀 보기가 이상하죠. 그래서 맨 첫 문단만 여백을 줄이겠습니다. 이는 유사 선택자라고 하는 부분인데요, 마치 링크에서 a:hover 라고 하면 마우스 오버가 되었을 때만 적용되는 스타일이 되는 것처럼 (*CSS2에서는 거의 모든 객체에 대해 :hover 스타일의 지정이 허용됩니다. IE6만 안됩니다;;;) 특정한 속성을 가진 녀석들만 따로 지정할 수가 있습니다. 괜히 본문의 마크업에 따로 class="first" 등과 같은 속성을 넣는 뻘 짓거리가 더 이상 필요 없다는 말이지요.

이제 아래쪽 아티클 메타데이터 영역만 손을 봅니다. ul 태그를 박스 모양으로 렌더링되게 display:block으로 정의하고, 폭을 100%로 줍니다. 그런 다음 li를 float:left로 정의하면 list 가 가로모양으로 나열될 수 있습니다. 굳이 ul을 블럭으로 다시 정의하는 것은, 이렇게 안하면 본문이 오른쪽으로 올라오기 때문입니다. (ul도 같이 float:left를 적용해 줘야 합니다. 이유가 궁금하시면 ul에 border를 줘서 눈으로 확인해보시면 좋아요)

자, 이제 각각의 포스팅 본문 영역의 모양새를 잡아 보겠습니다. 아무래도 문단과 문단은 조금 간격이 있는 것이 눈에도 잘 들어오겠죠? 근데, 이걸 하기 전에 잠깐 언급할 것이 있는데요. CSS표준에는 '마진 붕괴'라는 이상한 특성이 있습니다.

뭐냐면 위 아래로 박스가 계속 배열되는 경우에 (지금 우리가 공부하는 케이스에서 p 태그가 연속적으로 나오고 있는 것처럼요), 각 박스가 위쪽 마진 10px, 아래쪽 마진 10px씩을 가지고 있다면, p와 p 태그 사이의 간격은 20px이 되어야 마땅할 것인데, 이처럼 상/하로 붙어있는 박스들의 마진은 서로 먹어 들어가버려서 둘 중의 큰 쪽으로만 표현됩니다. (이 경우에는 10px로만 보임)

(궁금하시면 직접 실험해보시면 딱 좋을 듯. 먼저 p 태그의 아래 여백만 20px을 준 다음 화면을 확인하고, 위쪽 여백의 값을 점차 늘려가면서 화면의 모양이 어떻게 변하는지 보면 금새 이해가실 겁니다.) 그림으로 표현하면 한결 쉬운데, 김프가 너무 익숙치가 않아서요.. 죄송합니다. 대신 이 곳을 보시면 대충 그림이 있습니다. 영어로 되어 있기는 하지만 아래 위 10px씩 주면 20px이 될 것 같지만 사실은 그림과 같이 보인다... (픽셀 세보라는 거냐...)

아무튼 포스팅 내용의 문단에 대해서는 아래와 같이 살짝만 효과를 줍니다. 이곳에 쓰인 p:first-letter는 역시 유사 선택자로서, 문단의 첫 글자만 지정하는 녀석입니다. 영문으로 된 글의 경우에는 산뜻해 보일 수 있는데, 한글은 자칫 위험한 선택일 수도 있겠군요.

이제, 풋터 영역만 손을 봅니다. 그냥 가운데 정렬만 했음.

이제 다 했습니다. a 태그나 이미지에 대한 내용도 좀 쓰려고 했는데, 이 부분은 또 나중에 기회가 있을거라 믿어 의심치 않습니다. 이제 최종적인 문서의 모양을 보도록 하지요.

어떤가요? 지지난 글에서보다, 그리고 지난글/이번글의 맨 처음보다 그래도 한 결 나아진 느낌입니다. 이미지가 없어서 좀 썰렁할 수도 있겠지만, 뭐 어때요 이런게 미니멀리즘이라고 우기면 장땡이죠. 이렇게 페이지 하나를 완성했다고 해서 강좌가 끝나는 건 아니니 너무 아쉬워하진 마세요 ㅋㅋㅋ. (뭥미 아무도 아쉬워한 사람 없잖아 ㅠㅠ)

이렇게 css를 가지고 단순히 글꼴 색이나 모양새만 다룬 것이 아니라 레이아웃을 잡아보았으니, 첨에 말씀 드린 것처럼 CSS만 가지고 레이아웃을 바꾸는 것이 가능하다는 걸 여러분들에게 보여드려야 할 것 같네요. 자, 그럼 다음 시간까지 아마도 또 적지 않은 공백이 있겠습니다만 다들 잘 지내시기 바랍니다. 왠지 떡밥만 옛다 던져주고 도망가는 기분이네요. 그럼 모두들 감기 조심하세요~~~

html &css 소스 내려 받기 :

layouttest.html

css_test.css

아, 이렇게 강좌가 늘어지고 장황해지리라고는 생각하지 못했습니다. 아무튼 지난 시간까지는 긁어 갈 수 없게 편집기의 캡쳐로 코드를 보여드린 것은 너무나 죄송하지만... 실제 문서 마크업을 구성하는 방식을 처음부터 끝까지 살펴보았습니다.

지난 시간까지 사용했던 코드를 브라우저에서 살펴본다면 대략 아래와 같은 모습이 나오게 됩니다. (스크린샷은 오페라10 BETA2에서 80% 크기로 글자를 축소하여 찍은 것입니다.)

어디 무슨 HTML 스펙 문서와 같이 저 무미 건조함이 느껴지지 않습니까? 이제는 이 문서에 CSS를 더해 레이아웃의 개념을 좀 도입해 보려고 합니다. 그렇다고 그 무미건조함이 많이 상쇄되지는 않을 듯 합니다. 왜냐하면 저는 이 강좌에서는 페이지를 꾸미기위한 이미지를 쓸 생각은 절대로 없기 때문입니다. 네, 저 게으릅니다. - _-;

CSS 적용을 위해서는 새 파일을 하나 작성합니다. 마크업 문서가 저장되어 있는 곳과 같은 폴더에 다음 이름으로 텍스트 파일을 하나 생성합니다. (메모장 같은 데서 그냥 빈 파일을 저장하면 됩니다. 단, 메모장이라면 파일 형식을 "모든 파일 *.*"로 하고 저장해주세요. 저장 이름은 layout_test.css 입니다.

그러면 다시 html 문서를 열어서 head 부분에 다음과 같이 한 줄 추가해 줍니다.

<link rel="stylesheet" type="text/css" href="./layout.css" />

오 이런 스크린샷에서는 파일 이름이 바뀌었네요. 이건 강좌 마지막 부분에 CSS만 수정하여 페이지의 외관을 바꾸기 위해서 적용했을 때 찍은 스크린샷인가 봅니다. 자, 이제 웹 브라우저는 해당 파일을 읽어 들일 때 마다, 옆에 있는(?) layout_test.css 파일을 같이 읽어들이고, 여기에서 규정한 방식으로 화면을 렌더링해 줄 것입니다.

그럼 이제부터, css 파일을 요리하는 방법에 대해 알아보도록 하겠습니다.

1. 문자세트 지정

먼저 css 파일 자체가 어떤 문자열을 사용하는지 알려줄 필요도 있습니다. 간혹 폰트 이름 같은 걸 한글로 쓴다거나 하면, 문자값이 달라 한글이 깨지는 경우도 있을 수 있기 때문입니다. 제가 쓰는 notepad++에서는 UTF-8로 텍스트 파일을 저장하는 것이 가능하고, 기본적으로 저는 왠만하면 대부분의 파일을 utf-8로 저장합니다. 물론 한글을 한 자도 쓰지 않는다고 하면 사실 상 필요 없기는 합니다.

문자 세트 지정은 css 파일의 가장 처음에 나옵니다. 다음과 같이 씁니다.

@charset: "utf-8";

2. block 초기화

맨 위의 스크린샷을 보자면 순수한 HTML 일 뿐이지만, 태그 자체가 가지고 있는 디폴트 스타일로 인해 제목이 크게 표시되고, 리스트 항목이 들여쓰기가 되어 있는 등의 모양이 잡힌 부분이 있습니다. 이런 디폴트 스타일은 브라우저마다조금씩 조금씩 다르기 때문에 나중에 브라우저마다 레이아웃이 깨지거나 다르게 보이는 원인이 되기도 합니다. 그래서 문서에서 사용될 법한 대부분의 요소들을 미리 여백,공백,테두리를 없애는 작업을 해두고 시작합니다.

이걸 여기서는 그냥 block 초기화라고 하지요.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; background:transparent; }

실제적으로 저 모든 태그를 다 쓰는 것은 아닙니다. 여기서는 다음과 같이 해도 충분합니다.

html, body, div, p, span, h1, h2, h3, h4, h5, blockquote, a, pre, big, small, del, ins, em, strike, sub, sup, b, u, i, i, ol, ul, li {margin:0; padding:0; border:0; background:transparent; }

사실, CSS2 규격에는 universal selector 라는 게 규정되어 있습니다. 마치 명령 프롬프트에서 사용하는 와일드 카드와 같은 것이지요. 그래서, 위의 저 많은 태그들은 사실 한 방에 다음과 같이 정리됩니다.

* {margin:0; padding:0; border:0; background:transparent; }

그런데, 이 방법은 좀 치명적인 약점을 가지고 있습니다. 뭐냐면, IE 계열에서는 * 셀렉터가 너무나 유니버셜(?)한 관계로, 코멘트 태그가 <!-- 주석을 여기에 --> 같이 스타일을 적용 받아 버리기 때문입니다. (오 이런) 그래서 저런 유니버셜 셀렉터에 마진 값 같은 걸 임의로 설정하게 되면 나중에 스킨 같은 거 만들면서 이상하게 위치가 맞지 않는 상황을 만날 수 있다는 점 주의해 주세요.

그래서, 여기까지 입력해 두면 초기화는 끝났다고 보면 됩니다. 이제 모든 엘레먼트들의 여백값을 없애버렸으니, 웹 문서는 다음과 같이 보일 겁니다.

3. 기본적인 body 태그의 스타일 속성값 정의

body 태그에서 기본적인 글자 크기, 기본 폰트, 배경색 등을 미리 지정해둡니다. 다음과 같이 말이지요.

body 태그만큼은 배경색을 강제로 지정해두는 것이 중요합니다. 아실랑가 모르겠지만, 윈도우의 경우 테마 설정에 따라 브라우저의 바닥색이 흰색이 아니라 회색등의 다른 색일 수 있습니다. 심지어 꺼멓게 해두고 쓰시는 분들도 있어서 어떤 경우에는 글자가 잘 보이지 않는 불상사가 발생할 수도 있어요.

이제, 폰트 속성이 적용되어 조금 느낌이 달라졌습니다.

이제 실제로 레이아웃을 잡아볼 차례이군요. 저는 스크린샷을 잡기 용이하게끔 폭을 600px 정도로 줄여서 잡을 생각입니다. 물론 여러분은 그보다 더 커도 상관없지요. 하지만, 여러분이 만드는 웹 페이지는 전세계 사람들이 방문할 수 있습니다. 그들은 여러분처럼 좋은, 최신의 브라우저를 사용하지 않을 수도 있고, 여러분보다 훨씬 더 좋고 빠르고 웹표준에도 충실한 브라우저를 사용할 수도 있습니다. 그리고 정말 꼬진 컴퓨터나 꽉막힌 작고 저해상도의 화면을 가진 컴퓨터로도 접속할 지 모릅니다. 그래서 전체 페이지의 폭을 지정할 때에는 800px이나, 1024px 정도의 수준에서 잡으시면 좋을 듯 합니다. 

4. 본격적인 레이아웃

그리고, css에서 한 번에 모든 스타일을 정의하는 것보다 레이아웃 따로, 그 내부의 상세 스타일 따로 등등 정의하는 것이 나중에 수정하기가 훨씬 수월할 수 있습니다. 그래서 그렇게 섹션을 나누고, 각 섹션은 주석을 통해 구분하도록 하겠습니다.

음.. 제가 위에 쓴 내용을 먼저 조금 설명 드려야겠네요. div#wrapper 는 글 전체를 감싸기 위해 만든 div 태그이고 아이디가 wrapper로 적용되어 있습니다. 사실 그냥#wrapper라고만 해도 무관해요. 

그런다음 폭을 600px로 정의합니다. margin 값을 0 auto 0 auto라고 했는데요, 이는 위에서부터 시계방향으로 돌아가면서 여백값을 선언한 겁니다. (0px의 경우에는 px를 붙이지 않아도 됩니다.)

폭이 고정되고 양 옆의 여백이 auto가 된다면 브라우저는 내부 창의 폭(정확히는 wrapper의 상위 엘레먼트인 body)으로부터 양 옆 마진을 자동 계산하여 해당 요소를 가운데에 배치해 줍니다. 정말 그런지 확인해 보도록 하겠습니다.

빨간 점으로 둘러싸여진 페이지 전체가 창의 가운데로 들어왔습니다. 심심하신 분들은 창의 모서리를 잡고 늘렸다 줄렸다 해보세요. 예전에는 저렇게 항상 가운데로 몰기위해서는 자바스크립트를 썼던 것 같은데...

5. 헤더 정의하기

다음은 제목이 들어가는 헤더를 정의해 보겠습니다.

보시다시피 높이를 80px로 고정했네요. 그 아래쪽 부분과 구분되기 위해서 중간밝기 정도의 회색 라인으로 아래쪽만 테두리를 그렸습니다.

스크린샷은 생략합니다.

6. nav 영역 정의하기

이제부터는 조금 생각이 필요합니다.우선 저는 nav 영역은 왼쪽에 위치하는 사이드 바 모양이었으면 좋겠습니다. 그리고 전체 폭 600px 중 1/4 정도를 차지했으면 좋겠네요. 그래서 아래와 같이 정의했습니다.

이렇게만 하면 즐거운 css 생활이 시작될까요? 음 일단 확인해보겠습니다.

맙소사, sidebar 영역이 키가 작은 관계로 그 아래쪽으로는 content 영역의 글 들이 물밀듯이 밀려와 버렸습니다. (파란 테두리는 제가 식별하기 쉽게 하려고 일부러 넣었습니다) 하지만 저것으로 끝입니다. 본문 영역에서 마저 정리를 해야 합니다.

7. 본문 영역 정의하기

한 번 계산해보겠습니다. wrapper의 전체 폭은 600px입니다. 이 중에서 nav 영역이 150px을 사용하고 있지요. 그런데 저는 content 영역과 사이드 바 사이에 작은 선을 하나 그려서 영역을 구분하고 싶습니다. 그래서 그 선의 폭 1px을 감한 나머지 449px을 content 영역으로 사용할 생각입니다. 이렇게 맞추었다면 content에 좌우 padding/margin을 줘서는 안됩니다. 그러면 실제 콘텐트 영역 바깥으로 여백이 생기기 때문에 전체 박스가 커지게 되어 왕창 밑으로 밀려날테지요. 이런 경우에는 차라리 그 내부에 있는 article 영역에 margin 값을 주어서 공간을 띄워야 겠지요.

그 외에 아래쪽 footer랑 공간을 띄우기 위해서 padding을 밑으로만 조금 주었습니다. (footer 상단에도 가로선을 하나 그릴 생각이거든요) 그리고 중요한 부분을 하나 언급해야겠는데요. 바로 min-height 입니다. 이는 디자이너들이 웹 페이지를 디자인하면서 흔히 하는 실수를 떠올리게 만듭니다. 디자인 시안을 포토샵으로 작성할 때 주어진 가상의 데이터를 사용하여 페이지 모양을 잡게 되는데, 사실 최근의 웹페이지는 그 내용이 대부분 동적으로 변하게 됩니다. 따라서 본문이 아주 작은 경우에는 조금 낭패를 당할 수가 있다는 얘기지요. 즉, 아래와 같은 불상사를 일으킬 소지가 있다는 말씀입니다.

그래서, 본문이 최소한의 존엄성을 갖추게 하려고 일부러 최소폭의 제한을 둡니다. 물론 텍스트의 내용이 많아지면 content 영역은 400px 이상의 높이로 자꾸자꾸 늘어나게 됩니다. 이럴 때 min-height를 사용합니다. 이와 반대로 max-height도 있습니다. 

그리고 본문영역의 float는 왼쪽으로 지정했습니다. 물론 밑에서 막는 공사(?)를 하겠지만, 사정의 여의치 못한 경우에는 그 아래에 있는 영역이 짧아서 서러운 nav 영역으로 치고 올라오는 것을 막기 위해서 입니다.

이상의 내용을 정리하면...

이렇게 되는 군요. 이제 살짝 우리가 작업한 내용을 엿보겠습니다. 각 레이아웃 요소 내부의 모양새는 차츰 정리할 생각이니 조금만 기다려 주세요~

8. footer 영역 정의하기

header와 마찬가지로 footer는 좀 쉽습니다. 일단 위의 두 박스가 float로 묘기를 부리며 공간을 차지할 때 빈틈으로 쏠려 들어가지 않도록 clear 속성을 주셔야 한다는 것 외에는 별다른 특징이 없습니다. 그리고 윗부분과의 시각적인 구분을 위해 위쪽 테두리만 그렸습니다. 자, 그럼 여기서 다시 뒤돌아 볼 게 있는데요. 저는 위에서 content 하단의 여백을 margin을 쓰지 않고 padding를 썼습니다. 그 이유가 궁금하신 분은 margin으로 바꾸어보고 브라우저를 새로고침해보시면 되겠죠? (노파심에서 드리는 이야긴데, css 파일을 수정하면 저장한 후에 브라우저를 새로고침해주세요...)

이렇게 작성한 후 브라우저를 보면... (아래쪽을 주목하세요)

네, 이와 같이 정리되었습니다. 그럼 박스의 배치는 이렇게 끝났네요. 그런데, 본문들이 전부 여백없이 바짝 들러붙어 있거나, 리스트의 약물 기호가 밖으로 삐져나오는 등 마음에 들지 않는 부분들이 있습니다. (설마 이걸로 마음에 드는 사람이 있을까요?)

그러면 다음 글에서부터는 이제 본격적으로 각 요소요소의 스타일을 지정하여 모양새 좀 내어 보도록 하겠습니다. 강좌가 완료될 때 쯤엔 css 파일을 따로 업로드 해드릴테니 역정내지 마시고 차근히 기다리시면서 이것 저것 값도 바꿔보고 확인해보면 좀 더 도움이 되실 듯 하네요. 그럼 다들 오늘도 즐거운 하루 되세요~

*예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요

float 속성

이번 시간에는 css를 통해 레이아우팅을 할 때 가장 중요한 요소인 float에 대해서 살펴보도록 하겠습니다. css의 float 속성은 margin이나 position 속성과 함께 레이아웃을 만드는 가장 기본적인 원리 입니다. 우선 대략 다음의 코드를 가진 HTML 문서를 생각해보겠습니다.

<body>
  <div id="spDiv">content of DIV whose id is "spDvi"</div>
  <div id="norDiv">blah~ blah~ * 100 </div>
</body>

body엘레멘트 내부에 두 개의 div 엘레멘트가 들어있습니다. 이 들에는 각각 텍스트로 된 컨텐츠를 포함하고 있지요. 이를 도식으로 나타내면 대략 다음과 같을 겁니다. (정확한 스크린샷이 아닌 도식적으로 나타낸 그림입니다.)

위에 그림에서 볼 수 있듯이 div 엘레멘트는 하나의 블럭으로 디스플레이되고, 하나의 엘레멘트가 위치한 아래쪽으로 그 다음 엘레멘트가 위치하게 됩니다. 따라서  스타일 시트에서 다음과 같이 spDiv의 폭을 줄여준다면 어떻게 될까요?
block으로 디스플레이되기 때문에 옆 공간은 모두 여백이 되고 아래쪽에서 다음 div 엘레멘트가 시작되어 위치합니다. float는 이러한 공간의 낭비를 줄여줄 수 있는 속성입니다. 엘레멘트를 '띄워서' 여백이 공간을 차지하는 것을 없앱니다. 예를 들어 신문이나 잡지 등에서 사진의 옆으로 글이 이어지다가 사진이 끝나는 부분에서는 글이 지면의 왼쪽으로 튀어나오는 것을 볼 수 있을 것입니다. float는 바로 그러한 레이아웃을 가능하게 하는 겁니다. 예를 들어

p img{
    float:left;
}

와 같이 준다면 p 엘레멘트 안에 위치한 이미지 파일은 그러한 잡지의 사진처럼 보이겠지요.
그럼 예시 코드를 갖고 해보도록 하겠습니다. 스타일시트에서 다음과 같이 float 속성을 추가하겠습니다. left라 함은 왼쪽으로 붙어 띄운다는 의미입니다.

#spDiv{
    width:300px;
    float:left;
}

이렇게 하면 예상할 수 있듯이 아래와 같은 모양이 될 것입니다. (두번째 div 엘레멘트가 왼쪽으로 좀 삐져나간 것은 애교입니다.) 또한 아래 그림에서 주의할 것은 텍스트가 채운 영역을 표기하기 위해 테두리선을 그렸지만 실제로 두번째 div 엘레멘트의 박스모양은 사각형입니다. float 속성을 첫번째 spDiv에 부여함으로서 두번째 norDiv 엘레멘트는 그 시작점(왼쪽 위 모서리)이 spDiv와 같은 지점이 됩니다.
그럼 두 번째 엘레멘트인 norDiv의 폭을 500px로 줄인다면 어떤 결과가 될까요? 간단합니다. 폭이 줄어들었다뿐이지 위와 동일한 모양이 됩니다. 따라서 아래 그림과 같은 레이아웃을 만들기 위해서는 오른쪽으로 보내고자하는 norDiv 엘레멘트에 대해서 다음과 같이 스타일시트에서 float 속성을 지정해주면 됩니다. 이때 left 값을 주어도 현재로서는 같은 결과를 기대할 수 있습니다.

#norDiv{
    width:500px;
    float:right;
}

이제 두 박스 엘레멘트는 대략 다음과 같이 위치하게 됩니다. (폭의 픽셀값의 대한 상대적 크기는 역시 애교입니다.) 이 두 엘레멘트는 현재 float 속성을 받고 있습니다. 하나는 왼쪽으로 붙어서 떠 있고, 다른 하나는 오른쪽으로 붙어서 떠 있는 상태라 할 수 있습니다. 만약 두 번 째 엘레멘트에 float:left라고 지정해도 같은 결과를 볼 수 있습니다. 이는 float 속성을 부여 받은 엘레멘트는 '위로 떠올라' 그 다음에 나오는 엘레멘트와 겹치게 되지만, 실제로 컨텐츠가 보이는 영역을 밀어내는 작용을 하기 때문입니다. 하지만 float 속성을 부여받고 위로 떠오른 엘레멘트들 끼리는 서로 겹침이 없이 밀어 내게 되는 것입니다.
그럼 세번째 div 태그를 하나 추가해보도록하겠습니다. 그럼 어떻게 될까요?

<body>
  <div id="spDiv">content of DIV whose id is "spDvi"</div>
  <div id="norDiv">blah~ blah~ * 100 </div>
  <div id="thirdDiv">
</body>

세번째 div 엘레멘트인 thirdDiv는 float 속성이 없습니다. 단지 그 보다 앞서 등장한 두 개의 div 엘레멘트들은 float 속성을 받고 위로 떠 버렸습니다. 따라서 두 개의 엘레멘트를 무시하고 body의 왼쪽 상단에서 thirdDiv는 시작됩니다. 파란색의 ㄴ 자 모양의 블럭은 텍스트의 흐름을 뜻하는 것입니다. 실제 모양은 앞에서 말씀드린 바와 같이 그냥 박스입니다. 곧 두 개의 박스(spDiv, norDiv)는 float 속성을 부여받고 위로 떠올랐습니다. 떠오른 엘레멘트와 그렇지 않은 엘레멘트들은 서로 충돌하지 않습니다. 다만 나중에 등장한 (문서 상에서 뒤에 나오는) 엘레멘트는 그 보다 앞서 등장한 엘레멘트들이 차지하는 공간만큼 비켜주게 됩니다.  따라서 세번째 thirdDiv 엘레멘트는 시작은 왼쪽 위에서 하지만, 왼쪽 위의 공간은 spDiv가 차지하고 있습니다. 그 오른쪽에는 norDiv가 차지하고 있지요. 따라서 결국 위와 같은 모양으로 텍스트가 흐르게 됩니다. (조금 복잡한가요?)

여기서 재밌는 것은 이 엘레멘트들을 하나로 묶는 div 태그를 따로 사용하지 않았습니다. 따라서 이들의 상위 엘레멘트는 body가 됩니다.  즉 브라우저 화면의 크기에 따라 변동이 심할 수 있다는 것이지요. 만약, 브라우저 창이 충분히 넓다면 (혹은 spDiv,norDiv의 폭이 충분히 작다면) 다음과 같은 상황이 연출됩니다


위의 그림에서 분홍색으로 하이라이트된 박스는 spDiv 이고 푸른색으로 하이라이트된 박스는 norDiv입니다. 두 개가 벌어지고 가운데 빈 공간이 생기자 세번째 thirdDiv의 내용이 그 틈새로 흘러들어갑니다. 그럼, norDiv에게 float:left 속성을 부여했다면 어떻게 될까요? 답이 나오나요? ㅎㅎㅎ

만약에 브라우저가 작아지거나 북마크 사이드바를 연다든지 해서 body의 폭이 충분히 작아진다면 황당한 결과물을 만날 수 있습니다. float 속성을 가지고 정해진 width 값을 가진 두 개의 박스의 전체폭의 합보다 body의 width 값이 작아진다면, 맨 처음 상황처럼 nodDiv는 아래로 밀리게 됩니다. (감싸고 있는 엘레멘트의 폭이 커지는게 아닙니다) 그랬을 때 세번째 thirdDiv의 내용은 norDiv보다 위로 올라갈 수도 있습니다. 누누히 말하지만 float 속성이 없는 thirdDiv는 float 속성이 있는 엘레멘트들을 무시하고 시작합니다. 그림으로 보자면 아래와 같이 되는 것이지요.

clear 속성

이러한 증상을 방지하기 위해서는 이들을 감싸는 상위 엘레멘트를 하나 만들어주고, width값을 지정해 주어야합니다. 그리고 두 엘레멘트가 나란히 표시되기를 원한다면 두 개의 박스의 폭의 값(width를 포함하여 margin, border, padding이 모두 포함된)을 계산하여 상위 엘레멘트의 내부폭(width값)을 넘지 않도록 해야합니다.

그렇다면 float 속성이 없는 thirdDiv 가 정상적으로 두 엘레멘트의 아래쪽에 위치하려면 어떻게 해야할까요? 그것은 float으로부터의 영향을 제거하는 clear:both 라는 속성을 스타일시트에서 부여하면 됩니다.

#thirdDiv{
    clear:both
}

이제 아래 그림과 같이 각각의 box 엘레멘트들이 얌전히 자기 자리를 찾은 것을 확인할 수 있습니다. 또한 clear 속성은 이것 이외에도 다른 부작용을 해결하는 좋은 수단이 됩니다. 다시 #thirdDiv 가 없던 때로 돌아가 보겠습니다.

<body>
  <div id="wrapper">
      <div id="spDiv">content of DIV whose id is "spDvi"</div>
      <div id="norDiv">blah~ blah~ * 100 </div>
  </div>
</body>

이 번에는 spDiv와 norDiv를 둘러싸는 wrapper라는 div 태그를 넣었습니다. 두 엘레멘트들의 부모엘레멘트가 되는 셈이지요. 이 wrapper라는 엘레멘트에는 폭과 '배경색'을 넣겠습니다. 어떻게 위치하는지를 살펴볼 속셈이거든요.

#wrapper{
    width:900px;
    background-color:#ffffc3; /*노란색입니다*/
}

float으로 떠오른 녀석들은 단순히 아래에 인접한 엘레멘트에만 영향을 미치는 것이 아니라 부모엘레멘트를 완전히 벗어나 버립니다. 아래 그림에서 얇고 노란 박스가 wrapper입니다만, 다른 엘레멘트들은 그 외부로 벗어나와 보입니다. 
이를 해결하는 방법은 두 가지가 있습니다.

1. 첫번째 방법은 부모 엘레멘트인 wrapper에 float 속성을 부여하는 것입니다. float 속성을 가진 wrapper는 함께 떠올라 두 자식 엘레멘트들을 감싸게 됩니다.
2. 두번째 방법은 norDiv 다음에, 컨텐츠를 가지지 않는 div 엘레멘트를 하나 만들고 이 세번째 보이지 않는 엘레멘트에 clear:both를 적용하는 방법입니다.

이제 어느정도 float 속성에 대한 개념이 잡혔는지 모르겠습니다. 각각의 경우마다 간단한 html 문서를 직접 만들어서 확인해 보는 것이 이러한 개념을 이해하는데 도움이 되리라 생각됩니다. 보다 자세한 사항은 [고급 웹표준 사이트 제작을 위한 CSS 마스터 전략 : 에이콘 출판사]를 참조하시면 됩니다. (어쩌다가 책 광고를.. orz)

다음 시간에는 구조적인 마크업을 통한 네비게이션 메뉴를 만들어 보도록 하겠습니다. 간단한 리스트용 마크업 요소와 CSS를 통한 그래픽 요소와의 통합과 인터렉션에 대해 알아보겠습니다. ( 다음 시간에 소개할 내용은 CSS2 규격에 맞는 내용입니다. IE6 이하 버전에서는 자바스크립트나 기타 방법을 동원해야합니다.)

긴 글 읽어주셔서 감사합니다.

길고 긴 휴지기를 가지고서 어느 덧 네 번째 시간입니다. 글을 안쓰는 동안 지난 글을 살짝 읽어보았는데 어쩌면 그렇게 조잡하고 횡설수설하고 있는지 부끄러워서 몸 둘바를 모르겠더군요.

어쨌거나 기왕 시작한 거 끝까지 가 보도록 하겠습니다.

지난 시간에는 float 속성을 가지고 서로 떨어져있는 블럭들의 부모-자식간의 포함관계와 상하 순서에 따라 어떻게 텍스트가 분배되는지, 그리고 그 상위 객체의 크기에 따라서 그 위치 관계가 어떻게 되는지를 살펴보았습니다. 사실 이것 저것 예시 그림은 많이 붙여 놓았지만 워낙 글이 두서 없어서 어떤 내용인지는 정확히 파악이 안될 수도... ㅠㅠ 어쨌든 해당 코드를 실제로 작성해보고 끊임없이 F5 키를 눌러서 화면을 갱신해보기도 하고, 또 브라우저 크기를 늘였다, 줄였다하다보면 대충 감은 잡으셨으리라고 믿습니다.

그러면 이번에는 실제로 많은 블로그들이 취하고 있는 레이아웃을 연구해보고, 이것을 어떻게 표현할 수 있는지에 대해 알아보도록 하겠습니다.

블로그 페이지 레이아웃 요소

꼭 블로그가 아니어도 많은 웹사이트의 화면 레이아웃은 거의 유사한 형태를 띈다고 볼 수 있습니다. 일반적인 웹 문서의 구성 요소는 대략 다음 4가지로 구성할 수 있습니다.

• 헤더
  
• 네비게이션 영역 (혹은 사이드바)
  
• 본문 섹션
  
• 풋터
  

먼저 헤더 영역은 웹문서의 제목이 표시되는 영역입니다. 주로 화면의 사용 영역에서 폭을 100% 차지한다고 보면 됩니다. 여기서 말하는 '사용 영역'은 전체 body 영역(브라우저의 내부)중에서 상하좌우 네 방향의 여백을 제외한 영역을 생각하면 됩니다.

네비게이션 영역은 일반적으로는 '메뉴'를 생각하시면 됩니다. 우리는 메뉴라고하면 가로로 된 영역을 떠올리기 쉽지만, 많은 블로그에서는 이 네비게이션 영역을 사이드 바 형태로 쓰고 있습니다.

[티스토리 관리자 페이지 상단의 메뉴도 '네비게이션' 영역입니다]

본문 섹션은 실제로 본문이 위치합니다. 한 페이지에 여러 개의 포스트를 보여주는 블로그에서는 이 본문 섹션을 주로 세로로 다시 나누어서 사용하고 있지요. 이 부분에 대해서는 다음 시간에 조금 더 자세히 알아보도록 하겠습니다.

풋터영역은 헤더 영역과 마찬가지로 웹 문서 전체를 마감하는 용도로 활용됩니다. 왠만한 기업 사이트나 포털에서는 사업자 등록번호나 연락처, 사이트맵에 대한 링크 등등을 표시하는 용도로 사용합니다. 블로그에서는 블로그 툴의 로고 같은 것도 많이 사용되지요.

위에서 살펴본 이런 레이아웃 요소를 실제 사이트들의 예시를 통해 살펴보면 다음 그림들을 조금 보시면 보다 쉽게 이해가 가시리라 생각됩니다.

wireframe 본점의 테마중 하나

이런 형태가 많이 보이는 블로그의 모양새입니다. 물론 네비게이션 영역이 반대로 왼쪽에 위치하는 경우도 있지요. 그리고 최근에 많이 보이는 대형 블로그에서는 가로 모양의 메뉴와 세로 모양의 사이드바를 동시에 사용하는 곳도 있고 뭐 그렇습니다. 이러한 레이아웃을 이번 강좌에서는 실제로 어떻게 구성하는지 살펴보도록 하겠습니다.

예제 작성해보기

우선 지난시간 까지의 강좌를 참고하여 html 파일을 하나 구성합니다. 왠만하면 DOCTYPE 선언부터 meta 태그까지 왠만한 구색은 다 갖춘 문서틀을 만들어 두었다고 가정하도록 하겠습니다. 본 포스팅에서 이하 모든 코드는 notepad++에서 작성하여 캡쳐한 이미지입니다. 긁지 못하게 한 것은 조금 가혹하다는 생각도 들지만, 티스토리에서는 일일이 색상 넣는 것도 거의 미친 짓인거 같아서 포기했습니다. 약간 꼼수를 쓰면 코드 하이라이팅 효과가 가능하다고 하는데, 이미 편집기에 보기좋게 다 되어 있는 걸 그냥 캡쳐한다고해서 문제가 될 것 같지는 않습니다. 또한 CSS의 경우에는 브라우저 스크린샷을 잡기 전에 일부 코드를 추가/변경하기도 했습니다. (외곽선을 넣는다거나 하는 부분들) 따라서 스크린샷의 테두리선 같은 것들은 해당 코드를 저장하여 브라우저에서 보이는 것과는 조금 다를 수 있으니 이 부분은 양해 부탁 드릴게요

레이아웃 요소 정하기

맨 처음 할 것으로는 먼저 레이아웃 요소들을 각각 div 태그로 정의하는 일이 있습니다. body 태그 바로 다음에 div 태그를 하나 정의하고 id를 wrapper로 부여합니다. 말 그대로 전체 레이아웃을 모두 감싸는 역할을 하는 요소가 될 것입니다. 이렇게 하는 이유는 곧 알게 되겠지만, 이 wrapper 요소에 폭과 여백을 지정하여 웹 문서의 위치 및 크기를 정하게 됩니다.

그리고 그 안에 순서대로 header, nav, section, footer 영역이 될 div 태그들을 차례 차례 넣어줍니다.

헤더 작성

헤더 영역을 만들어 보겠습니다. 헤더 영역에는 문서 전체의 제목 (즉 블로그의 제목)과 이를 설명할 만한 작은 문구가 들어갈 수 있겠군요. 아래와 같이 작성했습니다. 큰 제목은 <h1> 태그를 사용합니다. 아울러 문서 전체의 비중에 따라 h2, h3, h4, h5, h6 등을 사용하면 좋겠지요. 티스토리 글 작성 도구에는 이런 헤딩을 지정하는 기능이 없고 단순히 글자 크기와 굵은 모양만 사용할 수 있도록 되어 있어서 매우 아쉽습니다. 

Nav 영역

다음은 nav 영역입니다.

nav 영역은 메뉴 구조가 되어야 하며 이는 ul (순서가 없는 리스트)로 표현하는 것이 맞겠지요. 그래서 아래와 같이 리스트를 사용했습니다. 큰 덩어리를 두 개 정도 li를 써서 나눕니다.

이렇게 기본 틀은 ul > li 구조로 만든 다음 이 기본 틀에서 다시 소제목과 그 아래 항목으로 구성되면 됩니다. h4 정도의 작은 제목을 사용하고 (왜냐하면 각각의 아티클에서 사용될 제목과 소제목 보다는 중요도가 작기 때문이라는 개인적인 판단에서 입니다.) 그 아래에 다시 ul 리스트를 사용하여 작은 제목을 답니다. 편의상 링크를 거는 건 생략하고 진행하겠습니다.

이제 다른 하나의 nav 항목을 작성합니다. 형식은 똑같이 유지하고 이번에는 Link 라고 두고 세부 항목을 작성했습니다. 

본문 영역

블로그에서 본문 영역은 웹 문서 전체에서의 본문에 해당하기도 하지만, 블로그 본문자체 만으로도 완결된 웹 문서의 구조를 가지게 되기도 합니다. 많은 블로그에서는 한 화면에 여러 개의 포스트가 연속적으로 표시되지만 각각의 포스트는 제목과 메타정보, 본문, 댓글 영역 등으로 레이아웃의 완결성을 가지게 되기도 하지요.

본문 영역인 content 요소는 다시 여러 개의 article 영역(하나의 개별 포스트)들로 나눠지게 됩니다. 이 하나의 article 영역은 다시 article_header 영역과 entry 영역으로 구분됩니다. (그냥 제가 임의로 이름 지었으니 괘념치 마세요)

한 가지 눈여겨 보아야 할 것은 content의 하위 요소들은 id로 이름 붙이지 않고 class로 정의 되었습니다. 이는 아까도 말씀 드렸듯이 article을 포함한 이하 요소들은 하나의 페이지에 여러 개가 나타날 수 있기 때문입니다. IE6와 같은 대책이 안서는 브라우저는 id 요소가 중복되어도 괘념치 않지만 (대체 왜? 어떻게?) 지금은 모던 브라우저의 시대인 만큼 어차피 표준도 아닌 부분을 고려할 필요는 없을 듯 하네요

구분해 놓은 영역들에 간략하게 가짜 데이터를 조금 넣어 봅니다. 제목은 h2 헤딩을 사용하고 개별 글의 메타 데이터를 표시하는 부분은 역시 리스트를 사용해서 묶었습니다.

entry 영역은 실제 본문 텍스트가 들어가는 부분이니 여기에는 각 단락은 p 요소로 구분해서 텍스트를 넣습니다.

하나만 있으니 조금 심심한 듯 해서 복사했습니다. 단락을 나누는 기본 요소는 p 입니다. p의 사용을 적절히 활용하면 웹 문서 전체에서 br 태그를 사용할 일도 거의 없어질 것으로 예상됩니다.

이미지가 너무 길어서 본문에는 넣지 않습니다만, article 영역 전체를 두 세 개 복사하여 한 페이지에 3개 씩 포스트가 있는 형태로 예제를 만들어 보는 것도 나쁘지 않을 듯 하군요. 한 번 해보시길.

풋터영역 만들기

풋터영역은 헤더와 같이 문서의 하단에서 문서를 마무리 하는 영역입니다. 대략적으로는 문서의 내용 외적인 문구를 많이 넣지요. 

사실은 이렇게 끝나는 것이 아니라 div 밑에 다시 p를 써야 합니다. 그림으로 되어 있으니 수정할 수가 없어서 그냥 패스했습니다.

결과 확인

이제 위에서 작성한 파일을 저장하고 브라우저로 결과를 테스트해보도록 하겠습니다. 임의로 결과 화면의 캡쳐를 위해서 wrapper의 폭을 제한하고, 각 요소에 테두리를 좀 쳐서 수정한 부분이며, 다른 변경은 없습니다. 결과 확인은 오페라 10 Beta에서 하였습니다.

wrapper로 문서 전체를 둘러쌌습니다. 테두리 있는 부분이 wrapper 요소 입니다.

아래 그림에서 노란색 테두리로 표시한 부분이  header 영역입니다. 아직 별다른 스타일은 전혀 지정하지 않았지만 헤딩에 의해서 구분되는 항목은 글씨 크기가 남다르다는 것을 확인할 수 있습니다. 물론 small 로 작성한 부분도 두드러지게 작아보이지요.

그리고 다음은 nav 영역입니다. 역시 헤딩 태그를 쓴 항목은 조금 두드러져 보입니다.

등장 순서에 맞게 다음은 content 영역입니다. 각 글의 제목이 조금 더 두드러져 보인다는 점을 잘 보세요. 브라우저는 기본적으로 헤딩이나 리스트에 대해 디폴트 스타일을 가지고 있습니다.

content 영역은 아까 조금 복잡하게 작성이 되었습니다. 오렌지색 항목으로 여러 개 아티클 중에서 하나만 표시해보았습니다.

그리고 각 article은 article_header와 entryl영역으로 구분됩니다. 아래 그림은 개별 아티클의 헤더입니다.

본문은 entry 영역으로 구분되었지요. 

물론 entry 영역은 그 내부에 여러 개의 p 요소를 가지고 있습니다.  내친 김에 p 요소도 빨간 점선으로 나누어 보았습니다. 물론 기타 다른 요소들도 가질 수 있지요.

이쯤되면 풋터 영역은 생략해도 되겠지요?

 분량이 너무 많아지는 군요. 그럼 어느 정도 쌀 밥은 준비가 되었으니, 다음 시간에는 css를 가지고 반찬을 더하는 작업을 해볼까 합니다. 분량이 꽤 많지만 그냥 편집기를 캡쳐한 관계로 지난 강좌들에 비해서는 작성이 조금 쉬웠습니다. 역시 티스토리는 코드 하이라이트 기능을 넣어줘야 한다니까요.

다음 시간에는 이렇게 만들어 놓은 XHTML 파일에는 손을 안 대고, (아 스타일 시트 링크는 추가해줘야하니 한 줄만 추가하구요 ㅎㅎ) CSS만으로 이제 저 껍데기 문서가 어떤 모양으로 변하는지 같이 살펴보도록 하겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다.

어느덧 3번째 강좌입니다. 오늘은 앞서 예고해 드린대로 CSS를 통해 레이아웃을 만들기 위해 기초적인 배경 지식에 대해 살펴보고, 몇 가지 사례를 살펴볼 생각입니다.

아주 오랜만에 강좌를 이어 씁니다. 지난 시간과는 달리 이번 시간부터는 '실습'을 해 보고자 합니다. 사실 XHTML 과 관련한 내용은 지난 시간에 다룬 내용이 거의 전부라고 말해도 별로 틀린 말은 아닌 듯 싶네요. 이번 시간에는 아주 간단한(?) 문서 예제를 통해 간단한 문서 마크업을 직접 작성하고, CSS를 적용하는 방법에 대해서 살짝 살펴 보도록 하겠습니다.

<html>

</html>

<html>

  <head>

  </head>

  <body>

  </body>

</html>

1. head 공간에 style 태그를 사용하여 스타일 시트를 정의하는 방법
2. <div style="... 과 같이 태그의 스타일 속성을 직접 명시하는 방법. 인라인 스타일시트라고도 합니다.
3. head 공간에 link 태그를 사용하여 외부 css 파일을 링크하는 방법
4. 링크한 css 파일에서 import 구문을 사용하여 다시 외부 css 파일을 반입하는 방법

웬만해선 IT 관련 글은 올리려고 하지 않는데, XHTML 관련하여 검색 유입이 많은 관계로 관련 강좌를 다시 올립니다. 사실 예전에 어떤 내용의 글을 올렸는지는 잘 기억도 나지 않는데, 대략 XHTML 과 CSS 만으로 레이아웃을 잡는 방법에 대한 내용이었던 것 같아서 한 번 대략적인 내용만 다시 작성해 봅니다. 요즘은 그리 시간이 넉넉치 못한 관계로 강좌 자체가 매우 드문 드문 올라올 수는 있지만 저를 책망하지는 말아주세요.